<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
    		padding:0;
    		margin:0;
    	}
        #body {background-image:url(img/c.jpg);}
        #div1{z-index:-1;height:50px;width:50px;position:absolute;background:red;top:0px;left:0px;border-radius:25px;}
        .a1{
        	width:100%;
        	height:80px;
        	background-color:rgb(129,83,0);
        	/*z-index:99;*/
        }
        .a1>div{
        	float:left;
        	background-color: rgb(117,73,0);
        	width:100px;
        	height:40px;
        	margin-top:20px;
        	color:rgb(146,116,30);
        	line-height:40px;
        	text-align:center;
        	margin-left:50px;
        	z-index:999;
        }
        .a3{
        	display:none;
        	z-index:9999;
        }
        .a2:hover .a3{
        	z-index:9999;
        	background-color: aquamarine;
        	display:block;
        }
        /*div:not(#div1){
        	opacity:0.9;
        }*/
       div{
       	opacity: 0.9;
       }
        img{
        	opacity:0.9;
        	margin:30px;
        	z-index:999;
        	width:300px;
        	height:300px;
        	transition:width 1s;
      -moz-transition:width 1s; /* Firefox 4 */
     -webkit-transition:width 1s; /* Safari and Chrome */
      -o-transition:width 1s; /* Opera */
             	transition:height 1s;
      -moz-transition:height 1s; /* Firefox 4 */
     -webkit-transition:height 1s; /* Safari and Chrome */
      -o-transition:height 1s; /* Opera */
                  	transition:margin-left 1s;
      -moz-transition:margin-left 1s; /* Firefox 4 */
     -webkit-transition:margin-left 1s; /* Safari and Chrome */
      -o-transition:margin-left 1s; /* Opera */
                  	transition:margin-top 1s;
      -moz-transition:margin-top 1s; /* Firefox 4 */
     -webkit-transition:margin-top 1s; /* Safari and Chrome */
      -o-transition:margin-top 1s; /* Opera */
        }
        img:hover{
        	width:280px;
        	height:280px;
        	margin-left:40px;
        	margin-top:40px;
        }
        .a4{
        	width:100%;
        	height:200px;
        	margin-top:40px;
        }
        .a5{
        	float:left;
        	width:48%;
        	height:100%;
        	margin-right:2%;
        }
        .a5>div{
        	text-align:right;
        }
        .a6>div{
        	text-align:left;
        }
        .a6{
        	float:left;
        	width:48%;
        	height:100%;
        	margin-left:2%;
        }
        .a7,.a10{
        	font-size:30px;
        	line-height:40px;
        	color:rgb(208,188,65);
        }
        .a8,.a9,.a11,.a12,.a13,.a14,.a15,.a16,.a17{
        	font-size:20px;
        	line-height:30px;
        	color:rgb(208,188,65);
        }
        .a18{
        	color:rgb(208,188,65);
        	position:absolute;
        	top:55px;
        	right:50px;
        	height:50px;
        	width:100px;
        	font-size:25px;
        	text-align:center;
        	line-height:50px;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        <!--当鼠标指针在元素内部移动时重复的触发 mosemove;-->
//      document.onmousemove=function(even)
//      {
//          var oDiv=document.getElementById('div1');
////            document.body  Chrome专用
//          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//          var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
//
//              var oEvent=even||event;
//              oDiv.style.top = (scrollTop+oEvent.clientY-25)+"px";
//              oDiv.style.left=(scrollLeft+oEvent.clientX-25)+"px";
//      }
$(document).mousemove(function(e){
	var oDiv=$('#div1');
	var scrollTop=$(document).scrollTop()||$('body').scrollTop();
	var scrollLeft=$(document).scrollLeft()||$('body').scrollLeft();
	oDiv.animate({top:(scrollTop+e.clientY-25)+"px",left:(scrollLeft+e.clientX-25)+"px"},18);
})

    </script>
</head>
<body id="body">
	<div class="a1">
		<div class="a2">首页	
		   <div class='a3'>
		   <div style="height:10px;width:100%;background-color:white;"></div>	
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   </div>
		</div>
		<div>起源历史</div>
		<div>糖画知识</div>
		<div>街市文化</div>
		<div>艺术展示</div>
	</div>
	<!--<div>
		<img src="img/timg.jpg" />
	</div>-->
	<div class="a4">
		<div class="a5">
			<div class="a7">萌芽期</div>
			<div class="a8">糖画旧称“糖饼儿”“糖影儿”“转糖”</div>
			<div class="a9">是人民非常喜爱的传统食玩,在明代“糖丞相”的基础上演化而来。</div>
		</div>
		<div class="a6">
			<div class="a10">兴盛期</div>
			<div class="a11">糖画出现在明朝,但清朝才是糖画的快速发展期</div>
			<div class="a12">主要体现在制作手法和题材选取方面,而熬糖工艺没有改进。</div>
			<div class="a13">糖画兴盛的局面一直持续到鸦片战争时。</div>
		</div>
	</div>
	<div class="a4">
		<div class="a5">
			<div class="a7">衰退期</div>
			<div class="a8">鸦片战争后,糖画赖以生存的物质基础受到破坏。</div>
			<div class="a9">1909年出版的《成都通览》中关于糖画的记载表明,</div>
			<div class="a14">清末的成都制售糖画的店铺比较多,糖画业颇为兴盛,</div>
			<div class="a16">由于受近代战乱的影响,糖画发展受到重创</div>
		</div>
		<div class="a6">
			<div class="a10">复兴期</div>
			<div class="a11">糖画作为民间传统技艺,在2008年进入第二批国家级批非物质文化遗产目录</div>
			<div class="a12">改革开放后,中国糖画艺人应邀去日本、西班牙等国家展示中国民间艺术</div>
			<div class="a17">糖画作为中国传统的民间艺术品</div>
			<div class="a15">对于增进中国与外国交流做出了重要贡献</div>
		</div>
	</div>


    <div class="a18">起源历史</div>

<div id="div1" >
</div>
</body>
</html>